<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- {{ }} 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令 
         将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致 
         注意：
            v-bind 指令是单项数据绑定：只在绑定的dom作用域生效，其他调用处不会同步数据的变化
            v-model是双向数据绑定
    -->
    
    <div id="app">
        <span v-bind:title="message2">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <br>
        <!-- v-bind 单项数据绑定，如果在页面修改input框的内容，即value值，上面span不会同步数据 -->
        <input type="text" style="width: 300px;" v-bind:value="message2">


        <!-- 但是对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，
        如果 isButtonDisabled 的值是 null、undefined 或 false，
        则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。    
        -->
        <br>
        <button type="button" v-bind:disabled="isButtonDisabled">disabled属性预期效果</button>
        <button type="button" disabled>应该显示的效果</button>
    </div>


</body>

</html>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message2: "页面加载于 " + new Date().toLocaleString(),
            // 如果定义了 isButtonDisabled 变量，那么页面的 button 按钮显示
            isButtonDisabled: true
        }
    });


</script>